<template>
    <a-layout-header class="top_header" :class="themes === 'dark' ? 'bgn' : 'bgw'">
        <a-row :gutter="16">
            <a-col class="gutter-row" :span="3">
                <div class="logo" />
            </a-col>
            <a-col class="gutter-row" :span="15">
                <Menus :model="horizontal" style="width: 60%;" />
            </a-col>
            <a-col class="gutter-row" :span="6">
                <Hearders />
            </a-col>
        </a-row>
    </a-layout-header>
</template>
<script>
import Menus from './menu.vue'
import Hearders from '@/components/Header/header.vue'
import Emitt from '@/utils/mitt'
export default {
    components: { Menus, Hearders },
    data() {
        return {
            horizontal: 'horizontal',
            themes: 'dark'
        }
    },
    created() {
        Emitt.on('settings', (val) => {
            this.themes = val.navTheme
        })
    },
    mounted() {
        const setting = JSON.parse(localStorage.getItem('themes'))
        if (setting) {
            this.themes = setting.navTheme
        }
    }
}
</script>
<style scoped>
.logo {
    float: left;
    width: 120px;
    height: 31px;
    margin: 16px 24px 16px 0;
    background: rgba(255, 205, 255, 0.3);
}

.logo {
    float: left;
    margin: 16px 0 16px 24px;
}

.top_header {
    padding-left: 10px;
    padding-right: 10px;
}

.bgw {
    background-color: #fff;
    color: #1F1F1F;
}

.bgn {}
</style>